import React, { useState, useEffect } from "react";
import "./style.scss";
import Banner from "@views/viewCommon/Banner";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import { Toast } from "antd-mobile";
import MainLayout from "@component/mainLayout/mainLayout";
const Coupon = props => {
	const [bannerList_bottom, set_bannerList_bottom] = useState([]);
	const [querySaveZone, set_querySaveZone] = useState({});

	/*******************业务方法 start************************/

	/**
	 * @msg: 查询满足自定义banner
	 * @param {*}
	 * @return {*}
	 */
	function customBanner_queryMeetCustomBanner() {
		return new Promise((resolve, reject) => {
			const params = {
				url: InterfaceG.customBanner_queryMeetCustomBanner,
				params: {
					productCode: "601",
					sourceCode: "save_money"
				}
			};
			yhTools.request(params).then(res => {
				resolve();
				if (res.code === "0") {
					const { data } = res;
					data &&
						data.length > 0 &&
						data.map(v => {
							switch (v.positionCode) {
								case "save_money_bottom":
									set_bannerList_bottom(v.meetBannerImgRespList);
									break;
								default:
									break;
							}
						});
				} else {
					Toast.info(res.message, 2);
				}
			});
		});
	}

	/**
	 * @msg:为你省钱
	 * @param {*}
	 * @return {*}
	 */
	function couponCenter_querySaveZone() {
		return new Promise((resolve, reject) => {
			let params = {
				url: InterfaceG.couponCenter_querySaveZone
			};
			yhTools.request(params).then(res => {
				resolve();
				if (res.code === "0") {
					set_querySaveZone(res.data);
				} else {
					Toast.info(res.message);
				}
			});
		});
	}

	/**
	 * @msg:初始化页面数据
	 * @param {*}
	 * @return {*}
	 */
	function initData() {
		Toast.loading("加载中", 100);
		let p_customBanner_queryMeetCustomBanner = customBanner_queryMeetCustomBanner();
		let p_couponCenter_querySaveZone = couponCenter_querySaveZone();
		Promise.all([
			p_customBanner_queryMeetCustomBanner,
			p_couponCenter_querySaveZone
		]).finally(() => {
			Toast.hide();
		});
	}

	useEffect(() => {
		initData();
	}, []);
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/

	/*******************点击事件 end************************/
	let _pageParams = {
		header: {
			title: "优惠券",
			headerBackground: "#fff",
			titleColor: "#232323",
			newBackButt: true
		},
		history: props.history,
		cacheLifecycles: props.cacheLifecycles
	};
	const { creditStatus, timeResps, totalDiscountCount } = querySaveZone;
	//creditStatus 用户授信状态：0，未开通用户；1，已开通未获得优惠用户；2，已开通用户获得优惠金额小于10；3，已开通用户获得优惠金额大于等于10
	return (
		<MainLayout pageParams={_pageParams}>
			<div className="page-saveMoney">
				<div className="saveMoney-header ui-flex ui-flex-column ui-flex-align-center">
					<div className="header-title f-32">永辉钱包已为您累计节省</div>
					<div className="header-money">
						{creditStatus === "3" && (
							<strong className="money-num f-72">{totalDiscountCount}</strong>
						)}
						{creditStatus === "1" && (
							<strong className="money-num f-56">暂未获得省钱优惠</strong>
						)}
						{creditStatus === "2" && (
							<strong className="money-num f-48">
								节省金额有限，您还需再接再厉
							</strong>
						)}
						{creditStatus === "3" && (
							<span className="money-text f-40">元</span>
						)}
					</div>
					{creditStatus === "3" ? (
						<div className="header-tips f-24">数据更新至昨天24点</div>
					) : (
						<div className="header-tips2 f-28 c-fff">
							超市购物用小辉付，天天随机减，最高立减99元
						</div>
					)}
				</div>
				{creditStatus === "3" ? (
					<div className="saveMoney-content">
						<div className="content-title f-36 f-b">最省钱时刻</div>
						<ul className="content-list">
							{console.log("timeResps", timeResps)}
							{timeResps &&
								timeResps.length > 0 &&
								timeResps.map((v, i) => {
									if (i < 3) {
										return (
											<li className="list-li" key={`${v.name}${i}`}>
												<div className="li-content">
													<div
														className={
															"content-head f-40 c-fff " +
															(i > 0 ? " content-head2" : "")
														}
													>
														<span className="head-text">{`NO.${i + 1}`}</span>
													</div>
													<div
														className={
															"content-body ui-flex ui-flex-justify-space-between ui-flex-align-center" +
															(i > 0 ? " content-body2" : "")
														}
													>
														<div
															className={
																"body-date f-32" + (i > 0 ? " body-date2" : "")
															}
														>
															{v.time}
														</div>
														<div className="body-money f-28">
															小辉付为你立省
															<span className="money-num f-48">{v.count}</span>
															元
														</div>
													</div>
												</div>
											</li>
										);
									}
								})}
							{timeResps.length === 0 && (
								<li className="list-noData ui-flex ui-flex-column ui-flex-align-center">
									暂无数据
								</li>
							)}
						</ul>
					</div>
				) : (
					<div className="saveMoney-content2">
						<div className="content2-msg"></div>
						<div className="content2-text f-24 c-666">永辉商超业态全覆盖</div>
					</div>
				)}
				{/*底部banner */}
				<Banner bannerList={bannerList_bottom} history={props.history} />
			</div>
		</MainLayout>
	);
};

export default Coupon;
